<template>
  <z-list
    v-if="comments.length"
    :data-source="comments"
    :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
    item-layout="horizontal"
  >
    <template #renderItem="{ item }">
      <z-list-item>
        <z-comment
          :author="item.author"
          :avatar="item.avatar"
          :content="item.content"
          :datetime="item.datetime"
        />
      </z-list-item>
    </template>
  </z-list>
  <z-comment>
    <template #avatar>
      <z-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
    </template>
    <template #content>
      <z-form-item>
        <z-textarea v-model:value="value" :rows="4" />
      </z-form-item>
      <z-form-item>
        <z-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
          Add Comment
        </z-button>
      </z-form-item>
    </template>
  </z-comment>
</template>
<script>
import { defineComponent, ref } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime);
export default defineComponent({
  setup() {
    const comments = ref([])
    const submitting = ref(false)
    const value = ref('')
    const handleSubmit = () => {
      if (!value.value) {
        return
      }
      submitting.value = true
      setTimeout(() => {
        submitting.value = false
        comments.value = [{
          author: 'Han Solo',
          avatar: 'https://joeschmoe.io/api/v1/random',
          content: value.value,
          datetime: dayjs().fromNow()
        }, ...comments.value]
        value.value = ''
      }, 1000)
    }
    return {
      comments,
      submitting,
      value,
      handleSubmit
    }
  }
})
</script>
